<template>
    <div class="absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] text-center">
        <svg viewBox="0 0 1090 1090" aria-hidden="true" fill="none" preserveAspectRatio="none"
            class="absolute top-1/2 left-1/2 -z-10 mt-44 w-[68.125rem] -translate-x-1/2 -translate-y-1/2 stroke-gray-300/30 [mask-image:linear-gradient(to_bottom,white_20%,transparent_75%)]">
            <circle cx="545" cy="545" r="544.5"></circle>
            <circle cx="545" cy="545" r="480.5"></circle>
            <circle cx="545" cy="545" r="416.5"></circle>
            <circle cx="545" cy="545" r="352.5"></circle>
        </svg>
        <p class="text-4xl font-semibold text-gray-900">404</p>
        <img src="@/assets/images/404.svg" alt="404" class="w-full mx-auto">
        <p class="mt-4 text-2xl font-medium tracking-tight text-gray-900">Page not found</p>
        <p class="mt-4 text-gray-600 mb-6">Sorry, we couldn’t find the page you’re looking for.</p>
        <a-button class="!rounded-md" type="primary" @click="router.push('/')">Go back home</a-button>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';

export default defineComponent({
    name: 'Page404',
    setup() {
        const router = useRouter();
        return { router };
    }
});
</script>